<template>
  <div class="index">
    <Head />
    <div class="search">
      <p>学习中心</p>
      <p class="wen">
        <input type="text" placeholder="英汉互译词典输入框" />
        <img src="../assets/sousuo.png" class="pos" />
      </p>
      <img src="../assets/guanbi(1).png" />
    </div>
    <div class="conn">
      <div class="main">
        <div class="left">
          <div>
            <div class="xx">
              <div class="title">
                <!-- <span><img src="../assets/home.png" /></span> -->
                <span>小学</span>
              </div>
              <div
                class="aclass"
                v-for="(item, index) in nj"
                :key="index"
                @click="
                  clssone(item.id);
                  djclass(index);
                "
                :class="{ bcks: zclass == index }"
              >
                {{ item.title }}
              </div>
            </div>
            <!-- chuz -->
            <div class="xx">
              <div class="title cztitle">
                <!-- <span><img src="../assets/home.png" /></span> -->
                <span>初中</span>
              </div>
              <div
                class="aclass"
                v-for="(item, index) in cznj"
                :key="index"
                @click="
                  clssone(item.id);
                  czcl(index);
                "
                :class="{ bcks: czclass == index }"
              >
                {{ item.title }}
              </div>
            </div>
            <!-- 课程 -->
            <div class="xx">
              <div class="title kctitle">
                <!-- <span><img src="../assets/home.png" /></span> -->
                <span>课程</span>
              </div>
              <div
                class="aclass"
                v-for="(item, index) in kecheng"
                :key="index"
                @click="
                  rdclick(item.id);
                  kccl(index);
                "
                :class="{ bcks: kcclass == index }"
              >
                {{ item.title }}课程
              </div>
            </div>
          </div>
          <div class="xx">
            <div class="title lxtitle">
              <!-- <span><img src="../assets/home.png" /></span> -->
              <span>类型</span>
            </div>
            <div
              class="aclass"
              v-for="(item, index) in types"
              :key="index"
              @click="
                lxclick(item.id);
                lxcl(index);
              "
              :class="{ bcks: lxclass == index }"
            >
              {{ item.title }}
            </div>
          </div>
        </div>

        <div class="right">
          <div class="listfor" v-for="(item, index) in books" :key="index">
            <div>
              <img :src="item.image" alt="" />
            </div>
            <div class="divbot">
              <p>{{ item.name }}</p>
              <p class="btn">继续测试</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script>
import axios from "axios";
import Head from "@/components/Head.vue";
import Footer from "@/components/Footer.vue";
export default {
  components: {
    Head,
    Footer,
  },
  data() {
    return {
      // tabs: ["标题一", "标题二", "标题三"],
      // tabContents: ["内容一", "内容二","内容三"],
      num: 0,
      currenta: 1,
      customColors: [],
      nj: [],
      cznj: [],
      kecheng: [],
      types: [],
      books: [],
      // 一次赋值
      oldArr: [],
      // 二次赋值
      kccla: [],
      // 三次赋值
      bookss: [],
      zhi: null,
      zhi2: null,
      typeas: [],
      zclass: null,
      czclass: null,
      kcclass: null,
      lxclass: null,
    };
  },
  methods: {
    onclick(id) {
      console.log(id);
      this.currenta = id;
    },
    iii(id) {
      console.log(id);
    },
    click_btn(a) {
      let that = this;
      that.list[a].checked = !that.list[a].checked;
    },
    toshow: function (e) {
      let that = this;
      console.log(e);
      that.list[e].show = !that.list[e].show;
      that.show = !that.show;
    },
    customColorMethod(percentage) {
      if (percentage < 0) {
        return "#fff";
      } else if (percentage < 100) {
        return "#05D380";
      } else {
        return "#fff";
      }
    },

    djclass(a) {
      console.log(a);
      this.zclass = a;
      this.czclass = null;
      this.kcclass = null;
      this.lxclass = null;
    },
    czcl(a) {
      console.log(a);
      this.czclass = a;
      this.zclass = null;
      this.kcclass = null;
      this.lxclass = null;
    },
    kccl(a) {
      this.kcclass = a;
      this.lxclass = null;
    },
    lxcl(a) {
      this.lxclass = a;
    },
    clssone(a) {
      this.zhi = a;
      this.books = [];
      // return
      for (let i = 0; i < this.oldArr.length; i++) {
        if (this.oldArr[i].grade_id == a) {
          this.books.push(this.oldArr[i]);
        } else {
          i = i + 0;
        }
      }
      console.log(this.books);
      this.bookss = this.books;
      this.booksss = this.books;
    },
    rdclick(a) {
      this.zhi2 = a;
      if (this.zhi == null) {
        alert("请选择年级");
      } else {
        this.kccla = [];
        console.log(this.bookss);
        // return
        for (let i = 0; i < this.bookss.length; i++) {
          if (this.bookss[i].course_id == a) {
            this.kccla.push(this.bookss[i]);
          } else {
            i = i + 0;
          }
        }
        console.log(this.kccla);
        this.books = this.kccla;
        this.bookss = this.booksss;
      }
    },
    lxclick(a) {
      if (this.zhi2 == null) {
        alert("请选择年级和课程");
      } else {
        this.typeas = [];
        console.log(this.bookss);
        // return
        for (let i = 0; i < this.kccla.length; i++) {
          if (this.kccla[i].mold_id == a) {
            this.typeas.push(this.kccla[i]);
          } else {
            i = i + 0;
          }
        }
        console.log(this.typeas);
        this.books = this.typeas;
        this.bookss = this.booksss;
      }
    },
  },
  created() {
    axios.interceptors.request.use(
      (config) => {
        config.headers["token"] = localStorage.getItem("token");
        return config;
      },
      (error) => {
        // 请求报错时的操作
        // // console.log(error) // for debug
        return Promise.reject(error);
      }
    );
    
    axios.get("/api/Index/index").then((res) => {
      let that = this;
      // console.log(res.data.data.book.data);
      // console.log(res.data.data.grade.data);
      that.nj = res.data.data.grade.data;
      that.cznj = res.data.data.junior.data;
      that.kecheng = res.data.data.course.data;
      that.types = res.data.data.mold.data;
      this.bookss = that.books = this.oldArr = res.data.data.book.data;
      // console.log(that.books);
      // 初始图片显示
    });
  },
};
</script>

<style lang="scss" scoped>
.bcks {
  color: orange !important;
}
.search {
  width: 98%;
  padding: 0 1%;
  height: 40px;
  line-height: 40px;
  background-color: #3571ff;
  color: #fff;
  display: flex;
  justify-content: space-between;

  .wen {
    width: 24%;
    position: relative;
    padding-bottom: 3px;

    input {
      width: 100%;
      background: #ffffff;
      border-radius: 24px;
      border: 1px solid #fff;
      height: 28px;
      line-height: 28px;
      text-indent: 2.4em;
    }

    .pos {
      position: absolute;
      left: 6px;
      top: 4px;
      width: 4.5%;
    }
  }

  img {
    width: 1%;
    height: 22px;
    margin-top: 8px;
  }
}
.conn {
  width: 100%;
  margin-bottom: 300px;
  background: #eff1f4;
  .main {
    width: 96%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .left {
      // border: 1px solid red;
      padding: 20px 0;
      width: 20%;
      background: #fff;
      .xx {
        p {
          text-align: center;
        }
        .cztitle {
          background: url(../assets/kechengguanli.png) no-repeat 20px !important;
        }
        .kctitle {
          background: url(../assets/kecheng1.png) no-repeat 20px !important;
        }
        .lxtitle {
          background: url(../assets/biaoqian1.png) no-repeat 20px !important;
        }

        .title {
          font-size: 25px;
          text-align: center;
          width: 100%;
          margin: 0 auto;
          background: url(../assets/home.png) no-repeat 20px;
          background-size: 25px;
          img {
            width: 28px;
            height: 24px;
          }
        }
        .aclass {
          text-align: center;
          // border: 1px solid red;
          padding: 10px 0;
        }
      }
    }
    .right {
      background: #fff;
      // border: 1px solid red;
      padding: 20px 10px;
      display: flex;
      justify-content: left;
      flex-wrap: wrap;
      width: 78%;
      .listfor {
        // border: 1px solid red;
        margin-left: 10px;

        width: 250px;
        height: 150px;
        display: flex;
        justify-content: space-between;
        // div {
        //   border: 1px solid red;
        // }
        img {
          width: 120px;
          height: 144px;
          margin-right: 10px;
          display: block;
          // border: 1px solid red;
        }
        .divbot {
          display: flex;
          justify-content: space-around;
          flex-direction: column;
          .hei {
            height: 70px;
          }
          .btn {
            width: 80px;
            margin: 0 auto;
            background: #05d380;
            text-align: center;
            color: #fff;
            border-radius: 10px;
            padding: 5px 0;
          }
        }
      }
    }
  }
}
</style>